// 纯ui组件, ui逻辑与redux逻辑分离
// 为了优化, 把ui组件和容器组件写在一个文件中

import React, { Component } from 'react'
// 引入store, 用于获取状态
import store from '../../redux/store'
// 引入actionCreator, 用于创建action对象
import {
    createAddAction,
    createMinusAction,
    createAddAsyncAction
} from '../../redux/count_action'

export default class Count extends Component {

    add = () => {
        const { value } = this.selectNum
        this.props.add(value * 1);
    }

    minus = () => {
        const { value } = this.selectNum
        this.props.minus(value * 1);
    }

    addIfOdd = () => {
        const count = store.getState()
        const { value } = this.selectNum
        if (count % 2 !== 0)
            this.props.add(value * 1);
    }

    addAsync = () => {
        const count = store.getState()
        const { value } = this.selectNum
        // setTimeout(() => {
        this.props.addAsync(value * 1, 1000);
        // }, 1000)
    }

    render() {
        // console.log(this.props);
        return (
            <div>
                <h1>当前求和为: {this.props.count}</h1>
                <select ref={c => this.selectNum = c} name="" id="">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.add}>+</button>&nbsp;
                <button onClick={this.minus}>-</button>&nbsp;
                <button onClick={this.addIfOdd}>当前求和为奇数时, +</button>&nbsp;
                <button onClick={this.addAsync}>异步, +</button>&nbsp;
            </div>
        )
    }
}
